<template>
  <div style="padding: 26px">
    <el-card>
      <el-form :inline="true" size="small">
        <el-form-item label="案件ID">
          <el-input v-model="queryData.caseMainId" placeholder="案件ID" />
        </el-form-item>
        <el-form-item label="案件状态">
          <el-select v-model="queryData.disposeStatus">
            <el-option
              v-for="item in anJStatus"
              :key="item.dictLabel"
              :label="item.dictLabel"
              :value="item.dictSort"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="案件类型">
          <el-select v-model="queryData.checkinDictJflxId">
            <el-option
              v-for="item in dict_jflxData"
              :key="item.dictLabel"
              :label="item.dictLabel"
              :value="item.dictSort"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="queryData.demandsName" />
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="queryData.demandsCardno" />
        </el-form-item>
        <el-form-item label="案件所属辖区">
          <el-select
            v-model="queryData.checkinTownshipId"
            placeholder="案件所属辖区"
          >
            <el-option
              v-for="item in checkin_township"
              :key="item.dictCode"
              :label="item.dictLabel"
              :value="item.dictCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getList"
            >查 询</el-button
          >
          <el-button icon="el-icon-refresh" @click="onReset">重置</el-button>
          <el-button
            type="success"
            icon="el-icon-edit"
            v-has-permi="['permissions:add']"
            @click="addAn"
            >登 记</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top: 20px">
      共{{ totals }} 条
      <el-table
        :data="tableData"
        size="small"
        style="max-height: 700px; overflow: auto"
      >
        <el-table-column
          label="案件ID"
          prop="caseMainId"
          width="80"
        ></el-table-column>
        <el-table-column
          label="登记时间"
          prop="createTime"
          width="180"
        ></el-table-column>
        <el-table-column label="简要事由" prop="checkinSummary" width="300">
          <template slot-scope="scope">
            <el-popover
              width="400"
              class="item"
              effect="dark"
              :content="scope.row.checkinSummary"
              placement="top-start"
              trigger="hover"
            >
              <span slot="reference">{{
                scope.row.checkinSummary.slice(0, 80) +
                (scope.row.checkinSummary.length > 80 ? "..." : "")
              }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="纠纷类型"
          prop="checkinDictJflxName"
        ></el-table-column>

        <el-table-column
          label="诉求人姓名"
          prop="demandsName"
        ></el-table-column>
        <el-table-column
          label="身份证号"
          prop="demandsCardno"
          width="180"
        ></el-table-column>
        <el-table-column
          label="家庭住址/或单位"
          prop="demandsAvatar"
          width="200"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="案件状态" prop="disposeStatus">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.disposeStatus == 0" type="">{{
              dictFomt(scope.row.disposeStatus)
            }}</el-tag>
            <el-tag v-if="scope.row.disposeStatus == 1" type="danger">{{
              dictFomt(scope.row.disposeStatus)
            }}</el-tag>
            <el-tag v-if="scope.row.disposeStatus == 2" type="warning">{{
              dictFomt(scope.row.disposeStatus)
            }}</el-tag>
            <el-tag v-if="scope.row.disposeStatus == 3" type="success">{{
              dictFomt(scope.row.disposeStatus)
            }}</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column label="分流窗口" prop="checkinExperiencedSysUserName"></el-table-column> -->
        <el-table-column label="分配" prop="checkinDeptName"></el-table-column>
        <el-table-column
          label="操作"
          prop="disposeStatus"
          fixed="right"
          width="150"
        >
          <template slot-scope="scope">
            <el-popconfirm
              title="确定受理吗?"
              @confirm="addAcceptsss(scope.row)"
            >
              <template #reference>
                <el-button
                  type="text"
                  style="margin: 0 10px"
                  size="mini"
                  v-if="scope.row.disposeStatus == 0"
                  >受 理</el-button
                >
              </template>
            </el-popconfirm>
            <el-button
              type="text"
              size="mini"
              @click="dawddwadwa(scope.row)"
              v-if="scope.row.disposeStatus != 0"
              >回执单
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="getInfo(scope.row)"
              v-if="scope.row.disposeStatus == 0"
              >编 辑</el-button
            >
            <el-button
              type="text"
              size="mini"
              @click="delAn(scope.row)"
              v-if="scope.row.disposeStatus == 0"
              >删 除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 15px; margin-bottom: 15px; float: right">
        <el-pagination
          @current-change="handleCurrentChange"
          background
          layout="prev, pager, next"
          :total="totals"
        >
        </el-pagination>
      </div>
    </el-card>
    <el-dialog
      :visible.sync="dialogVisible"
      width="50%"
      :title="dialogTitle"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        size="small"
        label-width="150px"
        class="demo-ruleForm"
      >
        <div style="display: flex; align-items: center">
          <div style="width: 5px; height: 20px; background: #3c82f5"></div>
          <div style="padding-left: 10px; font-weight: bold">诉求人信息</div>
        </div>
        <el-row style="margin-top: 20px">
          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="登记时间" prop="name">-->
          <!--              <el-input v-model="ruleForm.demandsName"></el-input>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->

          <el-col :span="12">
            <el-form-item label="身份证号" prop="demandsCardno">
              <el-input
                v-model="ruleForm.demandsCardno"
                @change="getListByCard"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="分流窗口">
              <el-input v-model="windowName" disabled></el-input>
                           <el-select v-model="ruleForm.demandsSysUserId" style="width: 100%" placeholder="请选择分流窗口">
                           </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="姓名" prop="demandsName">
              <el-input v-model="ruleForm.demandsName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="demandsSex">
              <el-select
                v-model="ruleForm.demandsSex"
                style="width: 100%"
                placeholder="请选择性别"
              >
                <el-option label="男" value="0"></el-option>
                <el-option label="女" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属辖区" prop="checkinTownshipId">
              <el-select
                v-model="ruleForm.checkinTownshipId"
                placeholder="所属辖区"
              >
                <el-option
                  v-for="item in checkin_township"
                  :key="item.dictCode"
                  :label="item.dictLabel"
                  :value="item.dictCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="checkinPhonenumber">
              <el-input v-model="ruleForm.checkinPhonenumber"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="家庭住址" prop="demandsAvatar">
              <el-input
                type="textarea"
                v-model="ruleForm.demandsAvatar"
                placeholder="请输入诉求人员的家庭地址或工作单位"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div style="display: flex; align-items: center; margin-top: 20px">
          <div style="width: 5px; height: 20px; background: #3c82f5"></div>
          <div style="padding-left: 10px; font-weight: bold">窗口登记信息</div>
        </div>
        <el-row>
          <el-col :span="24" style="margin-top: 10px">
            <el-form-item label="简要事由" prop="checkinSummary">
              <el-input
                type="textarea"
                v-model="ruleForm.checkinSummary"
                :rows="4"
                maxlength="200"
                show-word-limit
                placeholder="请输入诉求描述"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纠纷类型" prop="checkinDictJflxId">
              <el-select
                v-model="ruleForm.checkinDictJflxId"
                style="width: 100%"
                placeholder="请选择纠纷类型"
              >
                <el-option
                  v-for="(item, index) in dict_jflxData"
                  :value="item.dictValue"
                  :label="item.dictLabel"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否受理" prop="disposeStatus">
              <el-radio v-model="ruleForm.disposeStatus" :label="1"
                >是</el-radio
              >
              <el-radio v-model="ruleForm.disposeStatus" :label="0"
                >否</el-radio
              >
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="分流部门"
              v-if="ruleForm.disposeStatus == 1"
              prop="checkinDeptId"
            >
              <el-select
                filterable
                v-model="ruleForm.checkinDeptId"
                style="width: 100%"
                placeholder="请选择分流部门"
              >
                <el-option
                  v-for="(item, index) in deptList"
                  :value="item.deptId"
                  :label="item.deptName"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- <el-col :span="12">
            <el-form-item label="部门经办人" prop="checkinExperiencedSysUserId">
              <el-select v-model="ruleForm.checkinExperiencedSysUserId" style="width: 100%" placeholder="请选择部门经办人">
                <el-option v-for="(item, index) in deptUser" :value="item.userId" :label="item.userName"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input
                type="textarea"
                v-model="ruleForm.checkinRemark"
                placeholder="请输入备注信息"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quxiaoDialog">取 消</el-button>
        <el-button type="primary" @click="subData">确 定</el-button>
      </span>
    </el-dialog>
    <div
      style="width: 1487px; height: 2105px; position: absolute; top: -9999px"
      ref="printSection"
      v-if="showADWDAWD"
    >
      <div
        style="
          font-size: 60px;
          font-weight: bold;
          text-align: center;
          margin-top: 50px;
        "
      >
        高唐县社会治安综合治理中心
      </div>
      <div style="font-size: 50px; text-align: center; margin-top: 60px">
        受理告知单<!-- （存根联） -->
      </div>
      <div
        style="
          font-size: 40px;
          text-align: right;
          margin-top: 50px;
          padding-right: 100px;
        "
      >
        编号:{{ infoData.caseMainId }}
      </div>
      <div style="font-size: 40px; margin-top: 30px; padding-left: 100px">
        {{ infoData.demandsName }}（先生/女士）：
      </div>
      <div
        style="
          padding: 30px 100px;
          font-size: 40px;
          line-height: 100px;
          text-indent: 80px;
        "
      >
        您好！您于{{ infoData.createTime.substring(0, 4) }}年{{
          infoData.createTime.substring(5, 7)
        }}月{{ infoData.createTime.substring(8, 10) }}日提出的矛盾纠纷事
        项已收悉，并转交{{
          infoData.checkinDeptName
        }}机关（单位）处理，请您耐心等待调解，责任部门将在规定期限内（一般为30日）依法依规妥善调解，调解期间请不要就同一矛盾纠纷事项重复提出申请。
      </div>
      <div
        style="
          padding: 0px 80px;
          font-size: 40px;
          line-height: 60px;
          text-indent: 80px;
        "
      >
        特此告知。
      </div>
      <div
        style="
          text-align: right;
          padding-right: 100px;
          margin-top: 60px;
          font-size: 40px;
        "
      >
        高唐县社会治安综合治理中心
      </div>
      <div
        style="
          text-align: right;
          padding-right: 100px;
          margin-top: 50px;
          font-size: 40px;
        "
      >
        {{ infoData.createTime.substring(0, 4) }} 年
        {{ infoData.createTime.substring(5, 7) }} 月
        {{ infoData.createTime.substring(8, 10) }} 日
      </div>
      <div
        style="font-size: 25px; position: absolute; left: 100px; bottom: 0px"
      >
        备注：详情可咨询东昌府区社会治安综合治理中心综合受理窗口（电话：8418410）
      </div>

      <div style="font-size: 50px; text-align: center; margin-top: 100px">
        高唐县社会治安综合治理中心转办单
      </div>
      <div style="font-size: 40px; margin-top: 60px; padding-left: 100px">
        {{ infoData.checkinDeptName }}：
      </div>
      <div
        style="
          padding: 30px 100px;
          font-size: 40px;
          line-height: 100px;
          text-indent: 80px;
        "
      >
        县综治中心于{{ infoData.createTime.substring(0, 4) }}年{{
          infoData.createTime.substring(5, 7)
        }}月{{ infoData.createTime.substring(8, 10) }}日收 到{{
          infoData.demandsName
        }}<!-- 反映的{{
          infoData.checkinDictJflxName
        }}， -->
        反应的<span
          style="
            margin: 0 10px;
            display: inline-block;
            width: 180px;
            border-bottom: 1px solid black;
            box-sizing: content-box;
            text-align: center;
          "
        ></span>
        经分析研判/当事人申请，该事件由你单位处理，请认真核实并办理群众诉求，并在30日内依法依规妥善办理，
        事件办理情况及办理结果请于{{
          infoData.disposeEndTime.substring(0, 4)
        }}年{{ infoData.disposeEndTime.substring(5, 7) }}月{{
          infoData.disposeEndTime.substring(8, 10)
        }}日前反馈县综治中心。
        <!--        您好！您于{{ infoData.createTime.substring(0, 4) }}年{{ infoData.createTime.substring(5, 7) }}月{{ infoData.createTime.substring(8, 10) }}日提出的矛盾纠纷事-->
        <!--        项已收悉，并转交{{ infoData.checkinDeptName }}机关（单位）处理，请您耐心等待调解，责任部门将在规定期限内（一般为30日）依法依规妥善调解，调解期间请不要就同一矛盾纠纷事项重复提出申请。-->
      </div>
      <div
        style="
          padding: 0px 80px;
          font-size: 40px;
          line-height: 60px;
          text-indent: 80px;
        "
      >
        特此告知。
      </div>
      <div
        style="
          text-align: right;
          padding-right: 100px;
          margin-top: 30px;
          font-size: 40px;
        "
      >
        高唐县社会治安综合治理中心
      </div>
      <div
        style="
          text-align: right;
          padding-right: 100px;
          margin-top: 50px;
          font-size: 40px;
        "
      >
        {{ infoData.createTime.substring(0, 4) }} 年
        {{ infoData.createTime.substring(5, 7) }} 月
        {{ infoData.createTime.substring(8, 10) }} 日
      </div>
      <!-- <div
        style="font-size: 25px; position: absolute; left: 100px; bottom: 100px"
      >
        备注：详情可咨询东昌府区社会治安综合治理中心综合受理窗口（电话：8418410）。
      </div> -->
    </div>
  </div>
</template>

<script>
import {
  listNoAuth,
  mainAdd,
  mainlist,
  mainUpdate,
  addAccept,
  DelAccept,
  listNotAuth,
} from "@/api/aapal";
import { getDicts } from "@/api/system/dict/data";
import { getInfo } from "@/api/login";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import html2canvas from "html2canvas";
import printJs from "print-js";
export default {
  name: "acceptance",
  components: { Treeselect },
  data() {
    return {
      showADWDAWD: false,
      infoData: {},
      checkin_township: [] /* 乡镇数据 */,
      tableData: [],
      dialogTitle: "案件登记",
      windowName: "",
      deptUser: "",
      totals: 0,
      deptName: "",
      dialogVisible: false,
      ruleForm: {
        demandsName: "",
        checkinDeptId: "",
        demandsSex: "",
        checkinDictJflxId: "",
        checkinExperiencedSysUserId: "",
        checkinSummary: "",
        checkinRemark: "",
        demandsAvatar: "",
      },
      rules: {
        demandsCardno: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          { min: 18, max: 18, message: "长度为18位", trigger: "blur" },
        ],
        demandsName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
        ],
        demandsSex: [
          { required: true, message: "请选择性别", trigger: "change" },
        ],
        demandsAvatar: [
          {
            required: true,
            message: "请输入家庭住址或工作单位",
            trigger: "blur",
          },
        ],
        checkinDictJflxId: [
          { required: true, message: "请选择纠纷类型", trigger: "change" },
        ],
        checkinSummary: [
          { required: true, message: "请输入简要事由", trigger: "blur" },
        ],
        checkinExperiencedSysUserId: [
          { required: true, message: "请选择经办人", trigger: "change" },
        ],
        checkinTownshipId: [
          { required: true, message: "请选择乡镇", trigger: "change" },
        ],
        checkinDeptId: [
          { required: true, message: "请选择信访部门", trigger: "change" },
        ],
        disposeStatus: [
          { required: true, message: "请选择是否受理", trigger: "change" },
        ],
        checkinPhonenumber: [
          { required: true, message: "请输入手机号", trigger: "change" },
        ],
      },
      queryData: {
        pageNum: 1,
        pageSize: 10,
        status: 0,
      },
      anJStatus: [],
      dict_jflxData: [],
      timer: "",
    };
  },

  mounted() {
    this.getUserInfo();
    // this.getDeptTree()
    this.getList();
    this.getDict();
    this.getlistNotAuth(); /* 获取全部部门 */
    this.$store.dispatch("webSocket/startWebSocket");
  },
  // computed: {
  //   ...mapState({
  //     websocket: state => state.websocket,
  //   }),
  // }, watch: {
  //   websocket(newVal) {
  //     if (newVal) {
  //       newVal.onmessage = (event) => {
  //       };
  //     }
  //   },
  // },
  beforeDestroy() {
    clearInterval(this.timer);
  },

  methods: {
    dawddwadwa(row) {
      this.infoData = row;
      this.showADWDAWD = true;
      this.$nextTick(() => {
        const element = this.$refs["printSection"]; // 获取要打印的元素引用
        html2canvas(element).then((canvas) => {
          // 将元素转换为canvas图像
          const url = canvas.toDataURL("image/png");
          printJs({
            printable: url,
            type: "image",
            documentTitle: "", // 标题
            style: "@page{size:auto;margin: 1cm 1cm 0cm 1cm;}", // 去除页眉页脚
            onPrintDialogClose: () => {
              this.showADWDAWD = false;
            },
          });
        });
      });
    },
    quxiaoDialog() {
      clearInterval(this.timer);
      this.dialogVisible = false;
      this.$refs["ruleForm"].resetFields();
      this.$store.commit("webSocket/ADD_MESSAGE", "");
    },
    startTime() {
      this.timer = setInterval(this.valChange, 1000); // 注意: 第一个参数为方法名时不要加括号
    },
    valChange() {
      if (
        this.$store.state.webSocket.messages &&
        this.$store.state.webSocket.messages != ""
      ) {
        const fields = this.$store.state.webSocket.messages.split(":");
        if (fields.length >= 10) {
          (this.ruleForm.demandsName = fields[1]),
            (this.ruleForm.demandsSex = fields[3] == "男" ? "0" : "1"),
            (this.ruleForm.demandsCardno = fields[9]),
            (this.ruleForm.demandsAvatar = fields[8]);
          // this.$store.commit('webSocket/ADD_MESSAGE', '')
        }
      }
    },
    getlistNotAuth() {
      listNotAuth({ parentId: 101 }).then((res) => {
        this.deptList = res.data;
      });
    },
    /* 重置按钮 */
    onReset() {
      this.queryData = {
        pageNum: 1,
        pageSize: 10,
        status: 0,
      };
      this.getList();
    },
    /* 删除 */
    delAn(row) {
      this.$confirm("此操作将删除该案件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        DelAccept(row.caseMainId).then((res) => {
          if (res.code == 200) {
            this.$message.success("操作成功！");
            this.getList();
          }
        });
      });
    },
    /* 受理 */
    addAcceptsss(row) {
      let params = {
        disposeStatus: 1,
        isAccept: 0,
        caseMainId: row.caseMainId,
      };
      addAccept(params).then((res) => {
        if (res.code == 200) {
          this.$message.success("操作成功！");
          this.getList();
        }
      });
    },
    handleCurrentChange(val) {
      this.queryData.pageNum = val;
      this.getList();
    },
    addAn() {
      this.startTime();
      this.dialogVisible = true;
      this.dialogTitle = "案件登记";
    },
    getInfo(row) {
      this.startTime();
      row.checkinDictJflxId = row.checkinDictJflxId.toString();
      this.ruleForm = JSON.parse(JSON.stringify(row));
      this.dialogTitle = "案件编辑";
      this.dialogVisible = true;
    },
    dictFomt(val) {
      var r = "";
      this.anJStatus.forEach((item) => {
        if (item.dictValue == val) {
          r = item.dictLabel;
        }
      });
      return r;
    },
    subData() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          if (this.ruleForm.disposeStatus == 0) {
            this.ruleForm.checkinDeptId = "";
          }
          if (this.dialogTitle == "案件登记") {
            if (this.ruleForm.disposeStatus == 1) {
              this.ruleForm.isAccept = 0;
            }
            mainAdd(this.ruleForm).then((res) => {
              if (res.code == 200) {
                this.$message.success("操作成功！");
                this.getList();
                this.dialogVisible = false;
                this.$refs["ruleForm"].resetFields();
              }
            });
          } else {
            mainUpdate(this.ruleForm).then((res) => {
              if (res.code == 200) {
                this.$message.success("操作成功！");
                this.getList();
                this.dialogVisible = false;
                this.$refs["ruleForm"].resetFields();
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getListByCard(val) {
      var parmas = {
        demandsCardno: val,
      };
      mainlist(parmas).then((res) => {
        if (res.rows.length > 0) {
        }
      });
    },
    // getDeptTree() {
    //   deptTreeSelect().then(response => {
    //     this.deptOptions = response.data;
    //     this.enabledDeptOptions = this.filterDisabledDept(JSON.parse(JSON.stringify(response.data)));
    //   });
    // },
    getUserInfo() {
      getInfo().then((res) => {
        this.windowName = res.user.nickName;
        localStorage.setItem("windowName", res.user.nickName);
        this.ruleForm.demandsSysUserId = res.user.userId;
        this.deptName = res.user.dept.deptName;
        this.deptId = res.user.dept.deptId;
        // this.ruleForm.checkinDeptId = this.deptId
        this.getDeptUer();
      });
    },
    getDeptUer() {
      listNoAuth({ deptId: this.deptId }).then((res) => {
        this.deptUser = res.rows;
      });
    },
    getDict() {
      getDicts("dict_jflx").then((res) => {
        this.dict_jflxData = res.data;
      });
      getDicts("dispose_status").then((res) => {
        this.anJStatus = res.data;
      });
      getDicts("checkin_township").then((res) => {
        this.checkin_township = res.data;
      });
    },
    getList() {
      mainlist(this.queryData).then((res) => {
        this.tableData = res.rows;
        this.totals = res.total;
      });
    },
  },
};
</script>

<style scoped></style>
